<template>
	<view class="app-history">

		<view class="seach-box">
			<view class="input-item flex align-center">
				<view class="iconfont icon-sousuo icon"></view>
				<input class="input" v-model="loadData.videoName" @confirm="searchHandler" type="text" maxlength="30" />
				<!-- 清空按钮 -->
				<view class="clean-symbol" v-if="loadData.videoName" @click="clearInput">×</view>
			</view>
			<view class="seach-btn">
				<button type="default" @click="searchHandler">
					搜索
				</button>
			</view>
		</view>

		<view class="history-contain" v-for="item in historyData" :key="item.id">
			<view class="history-image">
				<image :src="item.videoCover" mode="scaleToFill" @click="gotToVideoDetial(item.videoId)" />
			</view>
			<view class="history-text" @click="gotToVideoDetial(item.videoId)">
				<text> {{ item.videoName }} </text>
				<view class="history-time">
					{{ item.time }}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import { loadHistory } from '@/api/media/media'

export default {
	data() {
		return {
			loadData: {
				videoName: undefined,
				loadCount: 10
			},
			historyData: {}
		}
	},
	onLoad: function (option) {
		this.handload()
	},

	onShow: function () {
		console.log('页面重新加载')

		// 每次页面显示时重新加载数据
		this.handload()
	},

	onReachBottom() {
		console.log('页面触底');
		this.loadData.loadCount += 1
		// 查询数据
		this.handload()
	},

	create() {
		console.log('钩子函数');
	},

	methods: {
		onPullDownRefresh() {
			console.log('refresh');
			this.handload()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		handload() {
			loadHistory(this.loadData).then(res => {
				this.historyData = res.data
			})
		},

		gotToVideoDetial(id) {
			uni.navigateTo({
				url: '/pages/video/video?id=' + id
			});
		},

		// 清空方法
		clearInput() {
			// 将输入框的值设置为空
			this.loadData.videoName = '';
			// 查询数据
			this.handload()
		},

		searchHandler() {
			this.handload()
		},
	}
}
</script>

<style lang="scss" scoped>
.app-history {
	.history-contain {
		display: flex;
		height: 100px;
		margin-top: 10rpx;
		align-items: center;

		.history-image {
			height: 100px !important;
			width: 40%;
			margin: 5rpx;

			image {
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}

		.history-text {
			height: 100px !important;
			width: 60%;
			margin: 5rpx;
			// background-color: red;
			align-items: center;
			// padding-top: 30px;
			padding-top: 20px;

			text {
				width: 100%;
				height: 100%;
				margin-left: 5rpx;
			}
		}

		.history-time {
			width: 100%;
			// margin-top: 25rpx;
			padding-top: 20px;
		}
	}

	.seach-box {
		display: flex;

		/* #ifdef MP-WEIXIN */
		/* margin-top: 65px; */
		/* #endif */

		/* #ifdef APP-IOS */
		margin-top: 0px;
		/* #endif */
		margin-left: 10px;
		margin-right: 10px;

		.input-item {
			width: 80%;
			margin: 20px auto;
			background-color: #f5f6f7;
			height: 45px;
			border-radius: 20px;
			margin-right: 5px;

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}

			.clean-symbol {
				font-size: 18px;
				margin-right: 15px;
			}
		}

		.seach-btn {
			border-radius: 30px;
			margin: 20px auto;
			margin-left: 10px auto;
			width: 20%;
			font-size: 14px;
			text-align: center;
			background-color: #f5f6f7;
		}
	}
}
</style>